<template>
  <!--首页-->
  <div class="leader">
    <el-row>
      <el-col :span="14">
        <el-row>
          <div class="box-row" style="margin-top: 0">
            <el-tabs v-model="activeOne">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in oneBoxList">
                <quick-access @showFormModal="showFormModal"></quick-access>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeTwo">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in twoBoxList">
                <div v-if="item.value=='first'">
                  <el-table :data="participate" :header-cell-style="{backgroundColor: '#e7f6f3'}" @row-click="showProjectSystem('kzxm')"
                            style="padding: 10px 20px;height: 237px;overflow: auto;">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="planEnd" label="计划结束" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="schedule" label="进度(%)"></el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column prop="operation" label="操作" width="200px">
                      <template slot-scope="scope">
<!--                        <el-button type="primary" plain @click.native.stop="showProjectSystem('wpsfj')">WPS分解</el-button>-->
                        <el-dropdown @command="showFormModal">
                          <el-button type="primary" plain>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="{name:'进度报告',value:'jdbg',row:scope.row}">进度报告</el-dropdown-item>
                            <el-dropdown-item :command="{name:'计划审批',value:'jhsp',row:scope.row}">计划审批</el-dropdown-item>
                            <el-dropdown-item :command="{name:'项目预算',value:'xmys',row:scope.row}">项目预算</el-dropdown-item>
                            <el-dropdown-item :command="{name:'项目验收',value:'xmjx',row:scope.row}">项目验收</el-dropdown-item>
                            <el-dropdown-item :command="{name:'停工申请',value:'sqsq',row:scope.row}">停工申请</el-dropdown-item>
                            <el-dropdown-item :command="{name:'复工申请',value:'sqsq',row:scope.row}">复工申请</el-dropdown-item>
                            <el-dropdown-item :command="{name:'终止申请',value:'sqsq',row:scope.row}">终止申请</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                              :limit.sync="queryParams.pageSize" style="margin: 0 25px 28px;"/>
                </div>
                <intended-project @showFormModal="showFormModal" v-if="item.value=='second'"></intended-project>
                <complated-project @showProjectSystem="showProjectSystem" v-if="item.value=='third'"></complated-project>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeThree">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in threeBoxList">
                <el-table :data="workStatementData" :header-cell-style="{backgroundColor: '#e7f6f3'}" @row-click="(row)=>{showFormModal({name: '工作报告档案', value: 'gzbg', row:row, status:'read'})}"
                          style="padding: 10px 20px;height: 200px;overflow: auto;">
                  <el-table-column prop="date" label="日期" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="reporter" label="报告人" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="workHour" label="工时" show-overflow-tooltip ></el-table-column>
                  <el-table-column prop="operation" label="操作" width="180px">
                    <template slot-scope="scope">
                      <el-button type="primary" plain @click.native.stop="showFormModal({name:'整改通知',value:'zgbg',row:scope.row, status:'add'})">整改通知</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row">
            <el-tabs v-model="activeFour">
              <el-tab-pane label="人员工时" name="first">
                <user-hours ref="userHours" :tabNum="activeFour" @showTables="showTables"></user-hours>
              </el-tab-pane>
<!--              <el-tab-pane label="投入成本" name="second">
              </el-tab-pane>-->
            </el-tabs>
          </div>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-row>
          <micard @showTables="showTables"></micard>
        </el-row>
        <el-row>
          <div class="box-row" style="margin-right: 0">
            <el-tabs v-model="activeFive">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in fiveBoxList">
                <el-table :data="todoData" :show-header="false" @row-click="(row)=>{showPlanChange({name: '计划变更', value: 'jhbg', row})}"
                          style="padding:0 20px;height: 165px;overflow: auto;">
                  <el-table-column prop="time" label="" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="cause" label="" show-overflow-tooltip v-if="item.value!=='second'"></el-table-column>
                  <el-table-column prop="request" label="" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="projectName" label="" show-overflow-tooltip v-if="item.value!=='second'"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row" style="margin-right: 0">
            <el-tabs v-model="activeSix">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in sixBoxList">
                <payment></payment>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
        <el-row>
          <div class="box-row" style="margin-right: 0">
            <el-tabs v-model="activeSeven">
              <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in sevenBoxList">
                <progress-card @showTables="showTables"></progress-card>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog :title="modalTitle" :visible.sync="modalState" @close="closeModal" :width="modalWidth" :close-on-click-modal="false">
      <quick-dialog :modalRow="modalRow" v-if="modalType=='form'"></quick-dialog>
      <system-dialog :modalRow="modalRow" v-if="modalType=='system'"></system-dialog>
      <table-dialog :modalRow="modalRow" v-if="modalType=='table'"></table-dialog>
      <plan-change :modalRow="modalRow" v-if="modalType=='change'"></plan-change>
    </el-dialog>
  </div>
</template>

<script>
import QuickAccess from "@/views/leader/components/quickAccess";
import Micard from "@/views/leader/components/micard";
import Payment from "@/views/leader/components/payment";
import UserHours from "@/views/leader/components/userHours";
import ProgressCard from "@/views/leader/components/progressCard";
import IntendedProject from "@/views/leader/components/intendedProject";
import ComplatedProject from "@/views/leader/components/complatedProject";
import QuickDialog from "@/views/leader/components/quickDialog";
import SystemDialog from "@/views/leader/components/systemDialog";
import TableDialog from "@/views/leader/components/tableDialog";
import PlanChange from "@/views/leader/components/planChange";

export default {
  name: "index",
  components: {
    PlanChange,
    TableDialog,
    SystemDialog,
    QuickDialog,
    ComplatedProject, IntendedProject, ProgressCard, UserHours, Payment, Micard, QuickAccess},
  data() {
    return {
      modalTitle:'',
      modalState: false,
      modalWidth:'',
      modalRow:{},
      modalType:'',
      activeOne: 'first',
      activeTwo:'first',
      activeThree:'first',
      activeFour:'first',
      activeFive:'first',
      activeSix:'first',
      activeSeven:'first',
      oneBoxList: [
        {label: '快捷入口', value: 'first'},
      ],
      twoBoxList:[
        {label: '开展项目', value: 'first'},
        {label: '意向项目', value: 'second'},
        {label: '完结项目', value: 'third'},
      ],
      threeBoxList: [
        {label: '工作报告', value: 'first'},
      ],
      fourBoxList:[
        {label: '人员工时', value: 'first'},
        /*{label: '投入成本', value: 'second'},*/
      ],
      fiveBoxList:[
        {label: '待办事项', value: 'first'},
        {label: '已办事项', value: 'second'},
        {label: '待发事项 ', value: 'third'},
        {label: '已发事项', value: 'fourth'},
      ],
      sixBoxList:[
        {label: '合同收付款', value: 'first'},
      ],
      sevenBoxList:[
        {label: '任务进度分析', value: 'first'},
      ],
      participate:[
        {projectName:'风光一体化防沙治沙',planEnd:'2024-06-01',schedule:'10',status:'执行'},
        {projectName:'三北六期',planEnd:'2024-06-01',schedule:'0%',status:'执行'},
        {projectName:'蚂蚁森林',planEnd:'2024-06-01',schedule:'100',status:'执行'},
        {projectName:'蓝旗机器人造林',planEnd:'2024-06-01',schedule:'60',status:'执行'},
      ],
      total:0,
      queryParams:{
        pageNum:1,
        pageSize:10
      },
      workStatementData:[
        {date:'2022-03-01',reporter:'朱XX',type:'月报',projectName:'风光一体化防沙治沙',workHour:' 102'},
        {date:'2022-04-03',reporter:'王XX',type:'周报',projectName:'三北六期',workHour:' 48'},
        {date:'2022-01-01',reporter:'刘XX',type:'月报',projectName:'蚂蚁森林',workHour:' 140'},
        {date:'2022-03-12',reporter:'朱X',type:'月报',projectName:'蓝旗机器人造林',workHour:'32'},
      ],
      todoData:[
        {time:'风光一体化防沙治沙-工程进度缓慢-2024-03-04',cause:'2024-03-04 13:23:59',request:'王XX',projectName:'防沙治沙'},
        {time:'三北六期-整改通知-2024-03-04',cause:'2024-03-04 13:23:59',request:'李XX',projectName:'绿化改造'},
        {time:'蚂蚁森林-森林覆盖率提升-2024-03-04',cause:'2024-03-04 13:23:59',request:'王X',projectName:'苗木栽培'},
        {time:'蓝旗机器人造林-机器人设备效率提升-2024-03-04',cause:'2024-03-04 13:23:59',request:'张XX',projectName:'机器人造林'},
      ],
    }
  },
  mounted() {
  },
  methods:{
    //打开quick-dialog组件
    showFormModal(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'form'
      if(data.value=='xmda' || data.value=='gzbg' || data.value=='fxdj' || data.value=='wtxz'){
        this.modalWidth = '60%'
      }else{
        this.modalWidth = '80%'
      }
    },
    //打开system-dialog组件
    showProjectSystem(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'system'
      this.modalWidth = '80%'
    },
    //打开table-dialog组件
    showTables(data){
      this.modalState = true
      this.modalTitle = data.name
      this.modalRow = data
      this.modalType = 'table'
      this.modalWidth = '70%'
    },
    //计划变更
    showPlanChange(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
      this.modalType = 'change'
      this.modalWidth = '60%'
    },
    closeModal(){
      this.modalState = false
    },

    handleClick(data){
      this.modalState = true
      this.modalTitle = ''
      this.modalRow = data
    },
  }
}
</script>

<style scoped lang="scss">
.leader {
  margin: 16px;

  ::v-deep {

    .el-table::before {
      height: 0;
    }

    .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
      border-bottom: 0 solid #dfe6ec;
    }

    .el-dialog__body {
      padding: 20px 0 0 0;
    }
  }
}
.box-row {
  margin: 16px 16px 0 0;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 0 14px 0 rgba(28, 111, 236, .15);
  color: #555;
  background-color: #fff;
  padding-top: 10px;

  ::v-deep {
    .el-tabs__header {
      margin: 0 0 0 20px;
    }

    .el-tabs__item {
      font-size: 16px;
    }

    .el-tabs__item.is-active {
      font-weight: 600;
      font-size: 16px;
    }

    .el-tabs__nav-wrap::after {
      height: 0;
    }
  }
}
</style>
